<template>
    <el-dialog v-model="dialogVisible" :before-close="handleClose">
        <template #title>
            <div class="fs-20 bold">
                {{advanceData.userName}}的预支单<span class="fs-14 fc-grey mg-l-25 normal">身份证号：{{ advanceData.idCardNo }}</span>
            </div>
        </template>
        <div class="box">
            <div class="flex flex-jc-sb">
                <!-- <div class="flex-1 text-center"></div> -->
                <div class="flex-1 fc-grey text-center">申请预支金额</div>
                <!-- <div class="flex-1 fc-grey text-center">额度显示：¥500</div> -->
            </div>
            <div class="fs-38 bold fc-pink text-center">¥{{ advanceData.advanceAmount }}</div>
        </div>
        <div class="flex flex-wrap">
            <div class="flex-item">
                <span class="fc-light">申请派遣单位：</span>
                <span>{{ advanceData.serveCompanyName }}</span>
            </div>
            <!-- <div class="flex-item">
                <span class="fc-light">当前派遣单位：</span>
                <span>111</span>
            </div> -->
            <div class="flex-item">
                <span class="fc-light">上次申请时间：</span>
                <span>{{ advanceData.lastAdvanceApplyTime || '--' }}</span>
            </div>
            <div class="flex-item">
                <span class="fc-light">上次申请金额：</span>
                <span class="fc-primary"><span v-if="advanceData.advanceAmount || advanceData.advanceAmount===0">¥</span> {{ advanceData.advanceAmount || '--' }}</span>
            </div>
            <div class="flex-item">
                <span class="fc-light">预支备注：</span>
                <span>{{ advanceData.applyRemark || '--' }}</span>
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { queryAdvanceApplyDetail } from '@/api/advance.ts';
export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false
        },
        id: {
            type: [String, Number],
            default: ''
        }
    },
    data() {
        return {
            dialogVisible: false,
            advanceData: {} as any
        }
    },
    watch: {
        show(newval) {
            this.dialogVisible = newval
        },
        dialogVisible(newval) {
            this.$emit('update:show', newval)
        },
        id (newval) {
            if(newval) {
                this.getData()
            }
        }
    },
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        getData() {
            queryAdvanceApplyDetail({
                id: this.id
            }).then(res => {
                console.log(444444, res);
                this.advanceData = res
            })
        }
    }
})
</script>
<style lang="stylus" scoped>
.box
    background #F5F5F7
    padding 24px
    margin-top -20px
.mg-t-24
    margin-top 24px
.fc-pink
    color #FF7E68
.fs-38
    font-size 38px
.flex-item
    flex-basis 50%
    font-size 12px
    margin-top 24px
.fc-light
    color #9497B1
</style>